<script setup>
import MIcon from '@/components/MIcon.vue'
import ClickBox from '@/components/ClickBox.vue'

/**
 * @param {String} icon
 * @description assets/img/ic-rec-${props.icon}.svg
 */
defineProps({
  title: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  line: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <ClickBox>
    <div
      class="h-full flex justify-center items-center"
      :class="{ 'line-cut': line }"
    >
      <MIcon v-if="icon !== ''" class="text-25px mr-8px" :name="icon" />
      <span class="text-16px font-400 text-#1E2226 leading-22px">
        {{ title }}
      </span>
    </div>
  </ClickBox>
</template>

<style scoped lang="less">
.line-cut {
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 31.96px;
    background-color: #eeeff2;
  }
}
</style>